import { getAudioSrc, getAudioInfo } from "../service/ajax.js";
import { formatSongTime } from "../util/util.js";
import { reactive } from "../util/reactive.js";
import { changePlayerMusicId } from "../player/player.js";

export async function initPlayerControl(reloadAudio = true) {
    let musicId = Number(window.localStorage.getItem("musicId"));
    // 加载音乐
    const musicSrc = await getAudioSrc(musicId);
    const musicData = await getAudioInfo(musicId);
    if (reloadAudio) {
        const myAudio = document.querySelector("#myAudio");
        myAudio.src = musicSrc;
        isPlayProxy.isPlay = true;
    }
    let songInfo;
    musicData && (songInfo = musicData.songs[0]);
    playerControlRender(songInfo);


    // let musicId=Number(window.localStorage.getItem("musicId"));
    // 修改播放器底部控制栏对应的href值，以便跳转页面的时候能拿到歌曲id
    PlayerCoverBackMode("player", musicId);

    // 初始化播放列表
    playerListRender();
}

export function playerListRender() {
    const playerListUl = document.querySelector(".player-list-ul");
    const playerListArr = JSON.parse(window.localStorage.getItem("songList") || "[]");
    const musicId = window.localStorage.getItem("musicId");
    playerListUl.innerHTML = "";
    playerListUl.innerHTML+=`
    <h2 style="font-weight:bold;">播放列表</h2>
    `;
    if (!playerListArr.length) {
        playerListUl.innerHTML = `
        <li class="player-list-li d-flex justify-content-start">
        请添加你喜欢的音乐
        </li>
        `;
    } else {
        const tempStr = playerListArr.map((item) => {
            return `
            <li class="player-list-li d-flex justify-content-start pointer" data-id='${item.id}'>
                <svg class="icon ${musicId==item.id?"":"opacity"} playing " aria-hidden="true">
                    <use xlink:href="#icon-bofangzhong"></use>
                </svg>
                <div class="songname single-text-omitted">${item.name}</div>
                <div class="singer">${item.ar[0].name}</div>
                <div class="song-time">${formatSongTime(item.dt)}</div>
            </li>
            `
        }).join("");
        playerListUl.innerHTML += tempStr;
    }

}

function playerControlRender(songInfo) {
    // 修改播放器控制栏的视图
    document.querySelector(".songname").innerText = songInfo.name;
    document.querySelector(".singer").innerText = songInfo.ar[0].name;
    document.querySelector(".total-time").innerText = formatSongTime(songInfo.dt);
    Array.from(document.querySelectorAll(".player-control-songinfo .img")
    ).forEach((item) => {
        item.innerHTML = `<img src=${songInfo.al.picUrl} alt=''>`;
    });
    document.querySelector(".player-control-unit #player-control").innerHTML = `
    <use xlink:href="#icon-bofangzhong"></use>
    `

    musicModeRender();//渲染播放模式图标
}

// 音乐的播放和暂停
const isPlayProxy = reactive(
    {
        isPlay: false,
    },
    playPauseKeyRender
);
const musicIdProxy = reactive(
    {
        musicId: 1813926556,
    },
    initPlayerControl
);

function playPauseKeyRender() {
    const myAudio = document.querySelector("#myAudio");
    const playerControl = document.querySelector(".player-control-unit #player-control");
    // 控制音乐的播放和暂停
    isPlayProxy.isPlay ? myAudio.play() : myAudio.pause();
    // 切换播放暂停图标
    isPlayProxy.isPlay
        ? (playerControl.innerHTML = `<use xlink:href="#icon-bofangzhong"></use>`)
        : (playerControl.innerHTML = `<use xlink:href="#icon-zanting1"></use>`);
}

export function initPlayerEvent() {
    // 事件初始化放在首次加载index.js时执行，控制播放及暂停
    const playerControl = document.querySelector(".player-control-unit #player-control");
    playerControl.addEventListener("click", () => {
        isPlayProxy.isPlay = !isPlayProxy.isPlay;
    });

    // 控制播放列表的显示与隐藏
    let isPlayerListShow=false;
    document.querySelector("#playerList").addEventListener("click", () => {
        const listsEle=document.querySelector(".player-list");
        isPlayerListShow=!isPlayerListShow;
        listsEle.classList.remove("display-none");
        !isPlayerListShow && listsEle.classList.add("display-none");
    })

    // 点击图标改变播放模式图标
    document.querySelector("#musicMode").addEventListener("click", (e) => {
        let musicMode=window.localStorage.getItem("musicMode") || 0;
        musicMode=++musicMode%3;
        musicModeProxy.musicMode=musicMode;
        window.localStorage.setItem("musicMode",musicMode);
    })

    // 点击图标改变播放模式
    const myAudio=document.querySelector("#myAudio");
    //上一首
    document.querySelector("#player-prev").addEventListener("click",()=>{
        musicIdProxy.musicId=changeMusicId("prev");
        changePlayerMusicId(musicIdProxy.musicId);
    })
    //下一首
    document.querySelector("#player-next").addEventListener("click",()=>{
        musicIdProxy.musicId=changeMusicId("next");
        changePlayerMusicId(musicIdProxy.musicId);
    })
    //歌曲播放自动切歌
    myAudio.addEventListener("ended",()=>{
        isPlayProxy.isPlay=false;
        musicIdProxy.musicId=changeMusicId("next");
        changePlayerMusicId(musicIdProxy.musicId);
    })
    // 点击播放列表修改
    document.querySelector(".player-list-ul").addEventListener("click",(e)=>{
        if(e.target.parentNode.tagName!="LI") return ;
        const musicId=e.target.parentNode.getAttribute("data-id");
        window.localStorage.setItem("musicId",musicId);
        musicIdProxy.musicId=musicId;
        changePlayerMusicId(musicIdProxy.musicId);
    },true);


    // 播放进度更新实时更新
    const percent=setProcess("#volume-bar","percentMode",0.5);
    myAudio.volume=percent;
    
    myAudio.addEventListener("timeupdate",(e)=>{
        const currentTime=e.target.currentTime;
        const totalTime=e.target.duration;
        setProcess("#progress-bar","percentMode",currentTime/totalTime);
        document.querySelector(".song-progress .current-time").innerHTML=formatSongTime(currentTime*1000);
    });
    // 进度条控制
    document.querySelector("#progress-bar").addEventListener("click",(e)=>{
        const percent=setProcess("#progress-bar","positionMode",e.clientX);
        const totalTime=myAudio.duration;
        myAudio.currentTime=percent*totalTime;
        isPlayProxy.isPlay=true;
    });
    document.querySelector("#volume-bar").addEventListener("click" , (e) => {
        const percent=setProcess("#volume-bar","positionMode",e.clientX);
        myAudio.volume=percent;
        isPlayProxy.isPlay=true;
    });
}

// 点击底部播放栏封面腿片，控制页面需要跳转的页面
export function PlayerCoverBackMode(page, id) {
    if (page == "player") {
        document.querySelector("#playerCover").setAttribute("href", `#/player/:${id}`);
        document.querySelector("#playerCoverBack").classList.add("display-none");
        document.querySelector("#playerCover").classList.remove("display-none")
    } else if (page == "recommend") {
        document.querySelector("#playerCover").setAttribute("href", `#/player/:${id}`);
        document.querySelector("#playerCoverBack").classList.add("display-none");
        document.querySelector("#playerCover").classList.remove("display-none")
    }
}


const musicModeProxy=reactive(
    {
        musicMode:0,
    },
    musicModeRender
);

// 音乐播放模式切换
function musicModeRender(){
    const mode=window.localStorage.getItem("musicMode") || 0;
    const musicModeStr=
    mode==0 ? '<use xlink:href="#icon-liebiaoxunhuan"></use>' 
    : mode==1 ? '<use xlink:href="#icon-suijibofang"></use>' 
    :'<use xlink:href="#icon-danquxunhuan"></use>';
    document.querySelector("#musicMode").innerHTML=musicModeStr;
}

// 通过改变musicId，达到播放模式控制的目的
// control：播放模式   mode==0:顺序播放   mode==1:随机播放   mode==2:单曲循环
function changeMusicId(control="next"){
    let musicId=window.localStorage.getItem("musicId") || 1813926556;
    const mode=window.localStorage.getItem("musicMode") || 0;
    if(mode==2) return musicId;//单曲循环模式下，不改变musicId
    const songList=JSON.parse(window.localStorage.getItem("songList") || "[]");
    const songs=songList.length;
    let index=songList.findIndex((item)=> item.id==musicId);
    if(mode==1){
        index=Math.floor(Math.random()*songs);  
    }else if(mode ==0 && control=="next"){
        index=++index%songs;
    }else if(mode==0 && control=="prev"){
        index=--index%songs;
    }
    musicId=songs>0 ? songList[index].id:musicId;
    window.localStorage.setItem("musicId",musicId);
    return musicId;
}

// 设置进度条的进度
function setProcess(eleName,mode,eleWidth){
    const progressBar=document.querySelector(eleName);//获取进度条容器
    const {left,width}=progressBar.getBoundingClientRect();//进度条的边界信息
    let percent;//进度百分比
    if(mode=="percentMode"){
        percent=eleWidth;
    }else if(mode=="positionMode"){
        let distance=eleWidth-left;
        percent=distance/width;
    }
    document.querySelector(`${eleName} .progress-bar`).style.width=`${(percent*100).toFixed(2)}%`;//toFixed，将格式转化为保留两位小数的字符串
    document.querySelector(`${eleName} .progress-dot`).style.left=`${Math.round(percent*width)-2}px`;
    return percent;
}